<template>
  <div>
    <h3 v-if="title">{{title}}</h3>
    <div class="preview-table el-table el-table--fit el-table--border" style="width: 100%;">
      <div class="el-table__body-wrapper">
        <table style="width: 100%;" class="el-table__body" cellspacing="0" cellpadding="0" border="0">
          <slot></slot>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "preview-table",
  props: {
    title: {
      type: String,
      default: ""
    }
  }
}
</script>
<style lang="scss" scoped>
.preview-table {
  table{
    width:100%;
    tr {
      display: flex;
      td {
        padding-left: 10px;
        padding-right: 10px;
        &:nth-child(2n - 1) {
          width: 20%;
          background: #f9f9f9;
          text-align: center;
        }
        &:nth-child(2n) {
          flex: 2;
        }
      }
    }
  }
}

/******************************************
*下方代码段：
*用于处理在目前项目中样式异常的问题，
*排查初步为升级element-ui导致(没深究) 
******************************************/
.el-table td, 
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
}
.el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
  border-right: 1px solid #EBEEF5;
}
.el-table td, .el-table th.is-leaf {
  border-bottom: 1px solid #EBEEF5;
}
</style>